<!DOCTYPE html>
<html>
<head>
   <title>CSS Animations - animation shorthand, default inheritance</title>
   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
   <link rel="help" href="http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property-">
   <meta name="flags" content="dom">
   <meta name="assert" content="animation-* properties don't get inherited from
   the shorthand">
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style type="text/css">
      @keyframes grow {
         from {
            width: 100px;
         }
         to {
            width: 200px;
         }
      }
      div {
         width: 100px;
         height: 100px;
         background: black;
      }
      div > div {
         background: blue;
      }
      .test {
         animation: grow 1s forwards;
      }
   </style>
   <script type="text/javascript">
      setup({explicit_done:true});
      onload = function() {
         var testName = document.querySelector('title').firstChild.data;
         var divs = document.querySelectorAll('div');
         var log = document.querySelectorAll('p')[1].firstChild;
         var passed = undefined;
         function aboutEqual(observed, actual) {
            var maxDeviation = 100;
            return (Math.abs(observed - actual) < maxDeviation);
         }
         var timeout = setTimeout(function() {
            test(function(){assert_true(passed);}, testName); done();
            log.data = (passed ? 'PASS if the animation occurred.' : 'FAIL');
         }, 1500);
         divs[0].addEventListener('animationend', function() {
            if (passed === undefined) {
               var outer = getComputedStyle(divs[0], null);
               var inner = getComputedStyle(divs[1], null);
               passed = (aboutEqual(Date.now() - startTime, 1000)
                  && inner.width == '100px' && outer.width == '200px'
                  && inner.getPropertyValue('animation-name') == 'none'
                  && inner.getPropertyValue('animation-duration') == '0s');
            } else {
               passed = false;
            }
         });
         divs[1].addEventListener('animationend', function() {
            passed = false;
         });
         var startTime = Date.now();
         divs[0].className = 'test';
      }
   </script>
   <style>iframe{display:none}</style>
</head>
<body>
   <p>A black square should grow out from the right edge of the blue square
   below.</p>
   <p>Testing...</p>
   <div>
      <div></div>
   </div>
</body>
</html>
